<% content_for :head do %>
  <%= tag.meta property: "og:type", content: "website" %>
  <%= tag.meta name: "fediverse:creator", content: @file.model.creator.federails_actor.at_address if @file.model.creator %>
<% end %>

<%= turbo_stream_from @file %>
<h1>
  <%= link_to "#{@file.model.name} /", @file.model, class: "link-secondary link-underline-opacity-0" %>
  <%= @file.name %>
</h1>

<div class="row row-cols-2">

  <div class="col-9">
    <% if @file.is_image? %>
      <%= image_tag model_model_file_path(@model, @file, format: @file.extension), alt: @file.name, style: "width: 100%" %>
    <% elsif @file.is_video? %>
      <%= video_tag model_model_file_path(@model, @file, format: @file.extension), alt: @file.name, style: "width: 100%", controls: true %>
    <% elsif @file.is_document? %>
      <%= tag.iframe src: model_model_file_path(@model, @file, format: @file.extension), alt: @file.name, style: "width: 100%; aspect-ratio: 0.707" %>
    <% elsif @file.is_renderable? %>
      <% if @file.presupported_version || @file.unsupported_version %>
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <% if @file.unsupported_version %>
              <%= link_to Model.human_attribute_name(:unsupported_version), [@model, @file.unsupported_version], class: "nav-link" %>
            <% else %>
              <a class="nav-link active" aria-current="page" href="#"><%= Model.human_attribute_name :unsupported_version %></a>
            <% end %>
          </li>
          <li class="nav-item">
            <% if @file.presupported_version %>
              <%= link_to Model.human_attribute_name(:presupported_version), [@model, @file.presupported_version], class: "nav-link" %>
            <% else %>
              <a class="nav-link active" aria-current="page" href="#"><%= Model.human_attribute_name :presupported_version %></a>
            <% end %>
          </li>
        </ul>
      <% end %>
      <%= Renderer(file: @file) %>
    <% end %>
    <% if @file.notes %>
      <%= card(:secondary, t(".notes_heading")) do %>
        <p class="card-text"><%= markdownify @file.notes %></p>
      <% end %>
    <% end %>
  </div>

  <div class="col-3">
    <%= card :secondary, t(".details_heading") do %>
      <% if @file.caption %>
        <p class='lead'><%= @file.caption %></p>
      <% end %>
      <div class="details-table">
        <div><%= ModelFile.human_attribute_name :filename %></div>
        <div><code><%= @file.filename %></code></div>
        <% if @file.digest %>
          <div>
            <%= ModelFile.human_attribute_name :digest %>
          </div>
          <div>
            <code><%= @file.digest.slice(0, 16) %></code>
          </div>
        <% end %>
        <% if @file.size %>
          <div>
            <%= ModelFile.human_attribute_name :size %>
          </div>
          <div>
            <code><%= number_to_human_size @file.size, precision: 2 %></code>
          </div>
        <% end %>
        <% if @file.dimensions %>
          <div>
            <%= ModelFile.human_attribute_name :dimensions %>
          </div>
          <div>
            𝒙 <code><%= format("%g", @file.dimensions.x.round(1)) %></code>
            𝒚 <code><%= format("%g", @file.dimensions.y.round(1)) %></code>
            𝒛 <code><%= format("%g", @file.dimensions.z.round(1)) %></code>
          </div>
        <% end %>
      </div>
    </div>
  </div>
  <div class="card-footer">
    <div class="btn-group">
      <%= link_to safe_join([Icon(icon: "cloud-download-fill", label: t("general.download")), t("general.download")], " "), model_model_file_path(@model, @file, @file.extension&.to_sym, download: "true"), {class: "btn btn-primary", download: "download"} %>
      <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Download options</span>
      </button>
      <ul class="dropdown-menu">
        <%= DropdownHeader text: t(".download.menu_header") %>
        <%= slicer_links @file %>
      </ul>
    </div>
    <div class="float-end">
      <%= BurgerMenu do %>
        <%= DropdownItem(icon: "pencil", label: translate("general.edit"), path: edit_model_model_file_path(@model, @file)) if policy(@model).edit? %>
        <%= DropdownItem(icon: "trash", label: translate("general.delete"), path: model_model_file_path(@model, @file), method: :delete, confirm: t("model_files.destroy.confirm")) if policy(@file).destroy? %>
      <% end %>
    <% end %>

    <%= render partial: "problems_card", locals: {problems: @file.problems.visible(problem_settings)} %>

  </div>
</div>
